<template>
  <div class="forgetLogin">
    <div class="delayTable" v-show="visible">
      <!-- 关闭按钮 -->
      <div class="close" @click="close">
        <i class="el-icon-switch-button"></i>
      </div>
      <!-- 标题 -->
      <div class="head" v-show="!FoundNext">忘记密码</div>
      <div class="head" v-show="FoundNext">修改密码</div>
      <div class="forgetContent">
        <div v-show="!FoundNext">
          <input
            type="tel"
            name="tel"
            placeholder="请输入正确的邮箱 "
            v-model="FoundDatas.email"
            :class="border1"
            @blur="checked2"
            class="input-item"
          />
          <input
            type="text"
            name="tel"
            placeholder="请输入验证码"
            v-model="FoundDatas.code"
            class="input-code"
          />
          <button
            class="input-btn"
            :disabled="!disabledCodeBtn || !FoundDatas.email"
            @click="Sendcode(FoundDatas.email)"
          >
            {{ codeText }}
          </button>
        </div>
        <div v-show="FoundNext">
          <input
            type="password"
            name="password"
            placeholder="请输入密码"
            v-model="passDatas.password"
            class="input-item"
          />
          <input
            type="password"
            name="password"
            placeholder="请再次确认密码密码 "
            v-model="passDatas.rpassword"
            :class="border1"
            @blur="rchecked"
            class="input-item"
          />
        </div>
        <button class="btn" @click="nextBtn" v-show="!FoundNext">下一步</button>
        <button
          class="btn btn1"
          v-show="FoundNext"
          @click="successful(passDatas)"
        >
          确认修改
        </button>
        <div class="methods">
          <p>通过手机号找回</p>
          <p @click="close">密码登录</p>
        </div>
        <div class="massage" :class="masgs">
          <span>{{ massage }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "ForgetLogin",
  data() {
    return {
      //判断邮箱和密码
      FoundDatas: {
        code: "",
        email: "",
      },
      //确认密码
      passDatas: {
        password: "",
        rpassword: "",
      },
      border1: "right",
      massage: "",
      masgs: "",
      codeText: "发送验证码",
      disabledCodeBtn: true,
      FoundNext: false,
      //用户ID
      userFormation: "",
    };
  },
  props: ["visible"],
  methods: {
    //关闭按钮
    close() {
      this.$emit("update:visible", false);
      this.masgs = " ";
      this.massage = " ";
    },
    //邮箱验证
    checked2() {
      const rg2 =
        /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
      if (!rg2.test(this.FoundDatas.email)) {
        this.masgs = "iconfont icon-cuowuguanbiquxiao-yuankuang";
        this.massage = "邮箱格式不正确！";
        this.border1 = "error";
      } else {
        this.border1 = "right";
        this.masgs = " ";
        this.massage = " ";
      }
    },
    //确定密码验证
    rchecked() {
      if (this.passDatas.password !== this.passDatas.rpassword) {
        this.masgs = "iconfont icon-cuowuguanbiquxiao-yuankuang";
        this.massage = "两次密码不一致";
        this.border1 = "error";
      } else {
        this.border1 = "right";
        this.masgs = " ";
        this.massage = " ";
      }
    },
    //验证码倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = true;
        this.codeText = "发送验证码";
        return;
      } else {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    /* 发送验证码 */
    Sendcode(value) {
      this.$http({
        url: `user/sendCodeByEmail?email=${value}`,
        method: "get",
      }).then(({ data }) => {
        if (data.flag) {
          this.countDown(60);
        } else {
          console.log(data.data);
        }
      });
    },
    //当邮箱和验证码匹配成功后
    nextBtn() {
      if (this.FoundDatas.code || this.FoundDatas.email) {
        let obj = {};
        obj.code = this.FoundDatas.code;
        obj.email = this.FoundDatas.email;
        this.$http({
          url: "user/findPasswordByEmail",
          method: "post",
          data: qs.stringify(obj),
        }).then(({ data }) => {
          if (data.flag) {
            this.userFormation = data.data;
            this.FoundNext = !this.FoundNext;
          } else {
            this.$message.error(data.errorMsg, this.sucess());
          }
        });
      } else {
        this.$message.error("请输入信息", this.sucess());
      }
    },
    //通过用户id和新密码修改密码
    successful(passDatas) {
      //当密码验证正确后
      let obj = {};
      obj.id = this.userFormation.id;
      obj.password = passDatas.rpassword;
      this.$http({
        url: "user/updatePassword",
        method: "post",
        data: qs.stringify(obj),
      }).then(({ data }) => {
        if (data.flag) {
          this.$message(
            {
              message: "修改密码成功",
              type: "success",
            },
            this.sucess()
          );
          this.$router.push({ name: "login" });
        } else {
          this.$message.error("修改密码失败", this.sucess());
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.forgetLogin {
  .delayTable {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 500px;
    padding: 23px 67px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 0 6px rgba(0, 0, 0, 0.09);
    box-sizing: border-box;
    z-index: 99;
    .close {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      // background-color: rgb(20, 152, 201);
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
    }
    .head {
      text-align: center;
      font-weight: 700;
    }
    .forgetContent {
      margin-top: 10px;
      .input-item {
        display: block;
        width: 94%;
        margin-bottom: 20px;
        padding: 10px;
        font-size: 15px;
        border-radius: 20px;
        border: 1px solid #807d7d;
        outline: none;
      }
      .input-code {
        display: inline-block;
        width: 200px;
        font-size: 15px;
        padding: 10px;
        border: 1px solid #807d7d;
        border-radius: 20px;
      }
      .input-btn {
        padding: 9px;
        border: 1px solid #807d7d;
        font-size: 13px;
        border-radius: 20px;
        background-color: skyblue;
        margin-left: 30px;
      }
      .btn {
        width: 100%;
        text-align: center;
        padding: 5px;
        margin-top: 30px;
        background-color: rgb(0, 108, 255);
        color: #fff;
        border-radius: 20px;
        border: none;
        cursor: pointer;
      }
      .btn1 {
        background-color: green;
      }
      .methods {
        p {
          text-align: center;
          font-size: 14px;
          color: rgb(0, 108, 255);
        }
      }
    }
  }
}
.right {
  border: 1px solid #807d7d;
}
.error {
  border: 1px solid red;
}
.massage {
  color: red;
  font-size: 10px;
  text-align: center;
  margin-top: 10px;
}
</style>